<template>
  <!-- 头部组件 -->
  <view class="custom-header">
    <!-- 头像 -->
    <view class="custom-header-avatar" @click="emits('open')">
      <acatar :size="74" :title="props?.title" :img="img"/>
    </view>
    <!-- 右侧内容 -->
    <view class="custom-header-extra">
      <img src="../../static/header/search.svg" class="custom-header-use-svg" />
      <img src="../../static/header/scan.svg" class="custom-header-use-svg" @click="scanQRCode"/>
    </view>
  </view>
  <dropDownModal
    :show="props.show"
    :userInfo="orgCtl.user"
    @close="emits('close')"
    :list="INFOLIST"
    :className="'leftTop'"
    @menuClick="menuClick"
  />
  <scanModal 
    :show="isScan"
    :targetId="targetId"
    @closeScanModal="closeScanModal"
    @confirmScanModal="confirmScanModal"></scanModal>
</template>

<script lang="ts" setup>
import acatar from './acatar.vue'
import dropDownModal from '@/components/customModal/dropDownModal.vue'
import scanModal from '@/components/scanModal/scanModal.vue'
import { INFOLIST } from '@/common/constant/index'
import msAppletApi from '@/utils/ms_applet_api'
import orgCtl from '@/ts/controller'
import {ref} from 'vue';

type Props = {
  title?: string
  show?: boolean
}
const props = defineProps<Props>()
const emits = defineEmits(['close', 'open', 'menuClick','closeScanModal','confirmScanModal'])
const isScan = ref<boolean>(false);
const targetId = ref<string>('');
const img = ref(orgCtl.user.share.avatar?.thumbnail);

/** 菜单点击事件 */
const menuClick = (value: string) => {
  if (value === 'exitLogin') {
    uni.reLaunch({
      url: '/pages/auth/login?clear=1'
    })
  }else if (value === 'userInfo') {
    uni.navigateTo({
      url: '/pages/auth/userInfo'
    })
    emits('close')
  }
}

const scanQRCode = () => {
  msAppletApi.scanCode({
    success(res:string) {
      const _targetId = res.split('/').at(-1);
      //发送扫码结果通知
      targetId.value=_targetId!;
      isScan.value=true;

    },
    fail(res:string) {
      console.log(res); // 扫描失败的错误信息
    },
  })
}

// 取消弹窗
const closeScanModal = () => {
  isScan.value = false
}
// 确认弹窗
const confirmScanModal = () => {
  isScan.value = false
}
</script>

<style lang="scss">
.custom-header {
  width: 100vw;
  height: 96rpx;
  padding: 16rpx 24rpx 16rpx 32rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  .custom-header-avatar {
  }
  .custom-header-extra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .custom-header-use-svg {
      width: 50rpx;
      height: 50rpx;
      margin-right: 12rpx;
    }
    .custom-header-use-svg-last {
      width: 50rpx;
      height: 50rpx;
    }
  }
}
</style>
